<template>
  <a-menu-item key="Dashboard">
    <i class="iconfont icon-shouyegailan" :class="layoutState.side.collapsed ? 'w-34' : ''" />
    <span>首页概览</span>
  </a-menu-item>
  <a-menu-item key="Site">
    <i class="iconfont icon-zhandianguanli" :class="layoutState.side.collapsed ? 'w-34' : ''" />
    <span>站点管理</span>
  </a-menu-item>
  <a-menu-item key="AdBank">
    <i class="iconfont icon-guanggaokuguanli" :class="layoutState.side.collapsed ? 'w-34' : ''" />
    <span>广告库管理</span>
  </a-menu-item>
  <a-sub-menu key="CollectManage">
    <template #icon>
      <i class="iconfont icon-caijiguanli text-[16px]" :class="layoutState.side.collapsed ? '' : 'no-margin'"></i>
    </template>
    <template #title> 采集管理 </template>
    <a-menu-item key="ResourcesList">
      <span>采集资源列表</span>
    </a-menu-item>
    <a-menu-item key="TimedTaskList">
      <span>定时任务</span>
    </a-menu-item>
  </a-sub-menu>
  <a-sub-menu key="TemplateManage">
    <template #icon>
      <i class="iconfont icon-mubanguanli text-[16px]" :class="layoutState.side.collapsed ? '' : 'no-margin'"></i>
    </template>
    <template #title> 模板管理 </template>
    <a-menu-item key="PublishedTemplate">
      <span>已发布模板</span>
    </a-menu-item>
    <a-menu-item key="RecentEdits">
      <span>最近编辑</span>
    </a-menu-item>
    <a-menu-item key="OwnTemplates"> <span>我的模板</span> </a-menu-item>
    <a-menu-item key="RecycleBin"> <span>回收站</span> </a-menu-item>
  </a-sub-menu>
  <a-sub-menu key="PermissionManage">
    <template #icon>
      <i class="iconfont icon-quanxianguanli text-[16px]" :class="layoutState.side.collapsed ? '' : 'no-margin'"></i>
    </template>
    <template #title> 权限管理 </template>
    <a-menu-item key="ManagerList">
      <span>管理员列表</span>
    </a-menu-item>
  </a-sub-menu>
  <a-sub-menu key="SystemManage">
    <template #icon>
      <i class="iconfont icon-xitongshezhi text-[16px]" :class="layoutState.side.collapsed ? '' : 'no-margin'"></i>
    </template>
    <template #title> <span>系统管理</span> </template>
    <a-menu-item key="SystemConfig"> <span>系统配置</span> </a-menu-item>
    <a-menu-item key="CollectConfig"> <span>采集设置</span> </a-menu-item>
    <a-menu-item key="DomainInsteadConfig" class="common-item"> <span>域名替换</span></a-menu-item>
    <a-menu-item key="CustomConfig">
      <span>自定义配置</span>
    </a-menu-item>
    <!-- <a-menu-item key="WhiteList">
      <span>白名单设置</span>
    </a-menu-item> -->
    <a-menu-item key="VersionUpgrade">
      <span>版本升级</span>
      <div v-if="isNewVersion" class="absolute top-[13px] left-[120px] w-max px-[8px] rounded-[2px] tooltip">
        发现新版本
        <div class="arrow"></div>
      </div>
    </a-menu-item>
  </a-sub-menu>
  <a-sub-menu key="BackupsManage">
    <template #icon>
      <i class="iconfont icon-shujuguanli text-[16px]" :class="layoutState.side.collapsed ? '' : 'no-margin'"></i>
    </template>
    <template #title> <span>数据管理</span> </template>
    <a-menu-item key="DataBackup"> <span>数据备份</span> </a-menu-item>
    <a-menu-item key="DataRecycle"> <span>数据恢复</span> </a-menu-item>
  </a-sub-menu>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { layoutState, toggleCollapsed } from '../../state'
import apis from '@/apis'
console.log('toggleCollapsed: ', toggleCollapsed)
const {
  system: { get_upgrade_info }
} = apis
interface IVersionState {
  version: string
  new_version: string
  update_content: string
}
const versionState = reactive<IVersionState>({
  version: '',
  new_version: '',
  update_content: ''
})
const isShow = ref(true)
//获取版本更新信息
const getUpgradeInfo = () => {
  get_upgrade_info()
    .then((res: any) => {
      console.log('res: ', res)
      Object.assign(versionState, res)
    })
    .catch(() => {})
}
/**
 * 是否有新版本
   true 是有新版本  false无新版本
 */
const isNewVersion = computed(() => {
  if (versionState.new_version && versionState.new_version != versionState.version) return true
  return false
})
watch(
  () => layoutState.side.collapsed,
  (val) => {
    console.log('val1: ', val)
    if (val) return (isShow.value = false)
    isShow.value = true
  },
  {
    deep: true,
    immediate: true
  }
)
onMounted(() => {
  getUpgradeInfo()
})
</script>
<style lang="less">
.editor-tooltip {
  .ant-tooltip-inner {
    color: #fe4c4d !important;
  }
}
</style>
<style lang="less" scoped>
.tooltip {
  color: #fe4c4d;
  background-color: #ffdede;
  border: 1px solid #fe4c4d;
  height: 29.9px;
  line-height: 29.9px;
  position: relative;
  .arrow {
    position: absolute;
    display: block;
    width: 13.07106781px;
    height: 13.07106781px;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
    top: -10%;
    left: -29px;
    -webkit-clip-path: polygon(0 0, 0% 0, 0% 50%, 52% 49%, 55% -12%, 49% 100%, 0 100%);
    clip-path: polygon(0 0, 0% 0, 0% 50%, 52% 49%, 55% -12%, 49% 100%, 0 100%);
    background-color: #ffdede;
    transform: translateY(60%) translateX(200%) rotate(45deg);
    border: 1px solid #fe4c4d;
  }
}
</style>
